<template>
  <Card style="height:900px">
    <p slot="title" style="font-size: 20px;">
      <Icon type="social-yen-outline"></Icon>
      贷款产品小类
    </p>
    <Table stripe border :columns="columns1" :data="data1"></Table>

    <div style="text-align: center;">
      <Button type="primary" v-if="editFlag==0" size="large" style="margin-top: 20px;" @click="addItem();">新建</Button>
      <Button type="primary" v-else disabled size="large" style="margin-top: 20px;margin-left: 15px;">新建</Button>
      <Button type="primary" v-if="editFlag==0" size="large" style="margin-top: 20px;margin-left: 15px;" @click="changeToEdit();">编辑</Button>
      <Button type="primary" v-if="editFlag==1" size="large" style="margin-top: 20px;margin-left: 15px;" @click="batchUpdate();">保存</Button>
      <Button type="primary" size="large" style="margin-top: 20px;margin-left: 15px;" @click="handleGoBack">返回</Button>
    </div>

    <div style="text-align:center;width:50%;margin:100px auto;">
      <Page :total="total2" size="small" :current="currentPage" :page-size="pageSize" show-total @on-change="queryPage"></Page>
    </div>
  </Card>
</template>

<script>
export default {
  data () {
    return {

      $ajax: null,

      columns1: [{
        title: 'ID',
        key: 'productId',
        width: 70,
        fixed: 'left'
      },
      {
        title: '产品名称',
        fixed: 'left',
        key: 'productName',
        width: 150
      },
      {
        title: '产品类别',
        fixed: 'left',
        key: 'productTypeName',
        width: 120
      },
      {
        title: '状态',
        key: 'status',
        width: 120,
        render: function (h, param) {
          const status = param.row.status
          switch (status) {
            case 0:
              return h('div', '使用中')
            case 1:
              return h('div', '拒绝')
            case 9:
              return h('div', '待审核')
            case 10:
              return h('div', '停用')
            default:
              return h('div', '')
          }
        }
      },
      {
        title: '平台费',
        key: 'platformFeeCode',
        width: 150,
        render: (h, param) => {
          var vm = this
          if (vm.editFlag === 0) {
            return h(
              'Input', {
                props: {
                  placeholder: '平台费',
                  disabled: true,
                  value: vm.getOptionValue(vm.ptSelectData, param.row.platformFeeCode)
                }
              }
            )
          } else {
            return h('Select', {
              props: {
                value: param.row.platformFeeCode
              },
              on: {
                'on-change': (value) => {
                  vm.$set(vm.data1[param.index], 'platformFeeCode', value)
                }
              }
            },
            this.ptSelectData.map(function (item) {
              return h(
                'Option', {
                  props: {
                    value: item.value + ''
                  }
                },
                item.label
              )
            })
            )
          }
        }
      },
      {
        title: '杂费',
        key: 'miscFeeCode',
        width: 150,
        render: (h, param) => {
          var vm = this
          if (vm.editFlag === 0) {
            return h(
              'Input', {
                props: {
                  placeholder: '杂费',
                  disabled: true,
                  value: vm.getOptionValue(vm.miscSelectData, param.row.miscFeeCode)
                }
              }
            )
          } else {
            return h('Select', {
              props: {
                value: param.row.miscFeeCode
              },
              on: {
                'on-change': (value) => {
                  vm.$set(vm.data1[param.index], 'miscFeeCode', value)
                }
              }

            },
            this.miscSelectData.map(function (item) {
              return h(
                'Option', {
                  props: {
                    value: item.value + ''
                  }
                },
                item.label
              )
            })
            )
          }
        }
      },
      {
        title: '服务费',
        key: 'consultingFeeCode',
        width: 200,
        // width: "8%",
        render: (h, param) => {
          var vm = this
          if (vm.editFlag === 0) {
            return h(
              'Input', {
                props: {
                  placeholder: '服务费',
                  disabled: true,
                  value: vm.getOptionValue(vm.consultSelectData, param.row.consultingFeeCode)
                }
              }
            )
          } else {
            return h('Select', {
              props: {
                value: param.row.consultingFeeCode
              },
              on: {
                'on-change': (value) => {
                  vm.$set(vm.data1[param.index], 'consultingFeeCode', value)
                }
              }
            },
            this.consultSelectData.map(function (item) {
              return h(
                'Option', {
                  props: {
                    value: item.value + ''
                  }
                },
                item.label
              )
            })
            )
          }
        }
      },
      {
        title: '管理费',
        key: 'manageFeeCode',
        width: 200,
        render: (h, param) => {
          var vm = this
          if (vm.editFlag === 0) {
            return h(
              'Input', {
                props: {
                  placeholder: '管理费',
                  disabled: true,
                  value: vm.getOptionValue(vm.mngSelectData, param.row.manageFeeCode)
                }
              }
            )
          } else {
            return h('Select', {
              props: {
                value: param.row.manageFeeCode
              },
              on: {
                'on-change': (value) => {
                  vm.$set(vm.data1[param.index], 'manageFeeCode', value)
                }
              }
            },
            this.mngSelectData.map(function (item) {
              return h(
                'Option', {
                  props: {
                    value: item.value + ''
                  }
                },
                item.label
              )
            })
            )
          }
        }
      }, {
        title: '滞纳金',
        key: 'lateFeeCode',
        width: 150,
        render: (h, param) => {
          var vm = this
          if (vm.editFlag === 0) {
            return h(
              'Input', {
                props: {
                  placeholder: '滞纳金',
                  disabled: true,
                  value: vm.getOptionValue(vm.lateSelectData, param.row.lateFeeCode)
                }
              }
            )
          } else {
            return h('Select', {
              props: {
                value: param.row.lateFeeCode
              },
              on: {
                'on-change': (value) => {
                  vm.$set(vm.data1[param.index], 'lateFeeCode', value)
                }
              }
            },
            this.lateSelectData.map(function (item) {
              return h(
                'Option', {
                  props: {
                    value: item.value + ''
                  }
                },
                item.label
              )
            })
            )
          }
        }
      }, {
        title: '违约金',
        key: 'penaltyFeeCode',
        width: 150,
        render: (h, param) => {
          var vm = this
          if (vm.editFlag === 0) {
            return h(
              'Input', {
                props: {
                  placeholder: '违约金',
                  disabled: true,
                  value: vm.getOptionValue(vm.penaltySelectData, param.row.penaltyFeeCode)
                }
              }
            )
          } else {
            return h('Select', {
              props: {
                value: param.row.penaltyFeeCode
              },
              on: {
                'on-change': (value) => {
                  vm.$set(vm.data1[param.index], 'penaltyFeeCode', value)
                }

              }
            },
            this.penaltySelectData.map(function (item) {
              return h(
                'Option', {
                  props: {
                    value: item.value + ''
                  }
                },
                item.label
              )
            })
            )
          }
        }
      }, {
        title: '提前结清费',
        key: 'preTerminationFeeCode',
        width: 150,
        render: (h, param) => {
          var vm = this
          if (vm.editFlag === 0) {
            return h(
              'Input', {
                props: {
                  placeholder: '提前结清费',
                  disabled: true,
                  value: vm.getOptionValue(vm.preSelectData, param.row.preTerminationFeeCode)
                }
              }
            )
          } else {
            return h('Select', {
              props: {
                value: param.row.preTerminationFeeCode
              },
              on: {
                'on-change': (value) => {
                  vm.$set(vm.data1[param.index], 'preTerminationFeeCode', value)
                }

              }
            },
            this.preSelectData.map(function (item) {
              return h(
                'Option', {
                  props: {
                    value: item.value + ''
                  }
                },
                item.label
              )
            })
            )
          }
        }
      }, {
        title: '担保服务费',
        key: 'guarantorFeeCode',
        width: 150,
        render: (h, param) => {
          var vm = this
          if (vm.editFlag === 0) {
            return h(
              'Input', {
                props: {
                  placeholder: '担保服务费',
                  disabled: true,
                  value: vm.getOptionValue(vm.guarantorSelectData, param.row.guarantorFeeCode)
                }
              }
            )
          } else {
            return h('Select', {
              props: {
                value: param.row.guarantorFeeCode
              },
              on: {
                'on-change': (value) => {
                  vm.$set(vm.data1[param.index], 'guarantorFeeCode', value)
                }

              }
            },
            this.guarantorSelectData.map(function (item) {
              return h(
                'Option', {
                  props: {
                    value: item.value + ''
                  }
                },
                item.label
              )
            })
            )
          }
        }
      }, {
        title: '车险费率',
        key: 'carFeeCode',
        width: 150,
        render: (h, param) => {
          var vm = this
          if (vm.editFlag === 0) {
            return h(
              'Input', {
                props: {
                  placeholder: '车险费率',
                  disabled: true,
                  value: vm.getOptionValue(vm.carFeeCodeData, param.row.carFeeCode)
                }
              }
            )
          } else {
            return h('Select', {
              props: {
                value: param.row.carFeeCode
              },
              on: {
                'on-change': (value) => {
                  vm.$set(vm.data1[param.index], 'carFeeCode', value)
                }

              }
            },
            this.carFeeCodeData.map(function (item) {
              return h(
                'Option', {
                  props: {
                    value: item.value + ''
                  }
                },
                item.label
              )
            })
            )
          }
        }
      }, {
        title: '车险保证金费率',
        key: 'carCautionFeeCode',
        width: 150,
        render: (h, param) => {
          var vm = this
          if (vm.editFlag === 0) {
            return h(
              'Input', {
                props: {
                  placeholder: '车险保证金费率',
                  disabled: true,
                  value: vm.getOptionValue(vm.carCautionFeeCodeData, param.row.carCautionFeeCode)
                }
              }
            )
          } else {
            return h('Select', {
              props: {
                value: param.row.carCautionFeeCode
              },
              on: {
                'on-change': (value) => {
                  vm.$set(vm.data1[param.index], 'carCautionFeeCode', value)
                }

              }
            },
            this.carCautionFeeCodeData.map(function (item) {
              return h(
                'Option', {
                  props: {
                    value: item.value + ''
                  }
                },
                item.label
              )
            })
            )
          }
        }
      }, {
        title: '意向金费率',
        key: 'carFrontFeeCode',
        width: 150,
        render: (h, param) => {
          var vm = this
          if (vm.editFlag === 0) {
            return h(
              'Input', {
                props: {
                  placeholder: '意向金费率',
                  disabled: true,
                  value: vm.getOptionValue(vm.carFrontFeeCodeData, param.row.carFrontFeeCode)
                }
              }
            )
          } else {
            return h('Select', {
              props: {
                value: param.row.carFrontFeeCode
              },
              on: {
                'on-change': (value) => {
                  vm.$set(vm.data1[param.index], 'carFrontFeeCode', value)
                }

              }
            },
            this.carFrontFeeCodeData.map(function (item) {
              return h(
                'Option', {
                  props: {
                    value: item.value + ''
                  }
                },
                item.label
              )
            })
            )
          }
        }
      }, {
        title: '操作',
        fixed: 'right',
        key: 'action',
        width: 230,
        render: function (h, param) {
          const vm = this
          return h('div', {}, [
            (param.row.status === 9 || param.row.status === 1) && h('Button', {
              props: {
                type: 'info',
                size: 'small'
              },
              style: {
                fontSize: '12px'
              },
              on: {
                'click' () {
                  if (!vm.checkInputDatas(param.row)) {
                    return
                  }
                  var str = prompt('审核理由：')
                  if (str) {
                    var params = {
                      productId: param.row.productId,
                      status: 0,
                      checkDesc: str
                    }

                    vm.$ajax.post(vm.$appContext.marvels_core_product + '/product/param/product/service/updateStatus', params).then(re => {
                      var data = re.data
                      var code = data.code
                      if (code === 'success') {
                        vm.$set(vm.data1[param.index], 'status', 0)
                        // param.row.status = 0
                      }
                    }).catch(er => {

                    })
                  }
                }
              }
            }, '审核通过'),
            param.row.status === 9 && h('Button', {
              props: {
                type: 'info',
                size: 'small'
              },
              style: {
                fontSize: '12px',
                marginLeft: '5px'
              },
              on: {
                'click' () {
                  var str = prompt('审核理由：')
                  if (str) {
                    var params = {
                      productId: param.row.productId,
                      status: 1,
                      checkDesc: str
                    }
                    vm.$ajax.post(vm.$appContext.marvels_core_product + '/product/param/product/service/updateStatus', params).then(re => {
                      var data = re.data
                      var code = data.code
                      if (code === 'success') {
                        vm.$set(vm.data1[param.index], 'status', 1)
                        // param.row.status = 1
                      }
                    }).catch(er => {

                    })
                  }
                }
              }
            }, ' 审核拒绝'),
            param.row.status === 10 && h('Button', {
              props: {
                type: 'info',
                size: 'small'
              },
              style: {
                fontSize: '12px',
                marginLeft: '5px'
              },
              on: {
                'click' () {
                  if (!vm.checkInputDatas(param.row)) {
                    return
                  }
                  var str = confirm('确定使用吗？')
                  if (str) {
                    var params = {
                      productId: param.row.productId,
                      status: 0,
                      checkDesc: str
                    }
                    vm.$ajax.post(vm.$appContext.marvels_core_product + '/product/param/product/service/updateStatus', params).then(re => {
                      var data = re.data
                      var code = data.code
                      if (code === 'success') {
                        vm.$set(vm.data1[param.index], 'status', 0)
                        // param.row.status = 0
                      }
                    }).catch(er => {

                    })
                  }
                }
              }
            }, '使用'),
            param.row.status === 0 && h('Button', {
              props: {
                type: 'info',
                size: 'small'
              },
              style: {
                fontSize: '12px',
                marginLeft: '5px'
              },
              on: {
                'click' () {
                  var str = confirm('确定停用吗？')
                  if (str) {
                    var params = {
                      productId: param.row.productId,
                      status: 10,
                      checkDesc: str
                    }
                    vm.$ajax.post(vm.$appContext.marvels_core_product + '/product/param/product/service/updateStatus', params).then(re => {
                      var data = re.data
                      var code = data.code
                      if (code === 'success') {
                        vm.$set(vm.data1[param.index], 'status', 10)
                        // param.row.status = 10
                      }
                    }).catch(er => {

                    })
                  }
                }
              }
            }, '停用'),
            h('Button', {
              props: {
                type: 'info',
                size: 'small'
              },
              style: {
                fontSize: '12px',
                marginLeft: '5px'
              },
              on: {
                'click' () {

                }
              }

            }, '删除')
          ])
        }.bind(this)
      }
      ],
      data1: [],
      total2: 0,
      currentPage: 1,
      pageSize: 10,
      miscSelectData: [],
      ptSelectData: [],
      consultSelectData: [],
      mngSelectData: [],
      lateSelectData: [],
      penaltySelectData: [],
      preSelectData: [],
      guarantorSelectData: [],
      carFrontFeeCodeData: [], // 意向金费率
      carCautionFeeCodeData: [], // 车险保证金费率
      carFeeCodeData: [], // 车险费率
      editFlag: 0 // 默认为 0  非编辑态   1 编辑态
    }
  },
  created () {
    this.$ajax = this.$util.ajax()
    this.initPage()
  },
  methods: {
    checkInputDatas (paramsRow) {
      if (this.editFlag === 1) {
        this.$Message.warning('编辑状态无法保存')
        return false
      }
      if (paramsRow.platformFeeCode === null) {
        this.$Message.warning(paramsRow.productName + '平台费率为空')
        return false
      }
      if (paramsRow.miscFeeCode === null) {
        this.$Message.warning(paramsRow.productName + '杂费率为空')
        return false
      }
      if (paramsRow.consultingFeeCode === null) {
        this.$Message.warning(paramsRow.productName + '咨询费率为空')
        return false
      }
      if (paramsRow.manageFeeCode === null) {
        this.$Message.warning(paramsRow.productName + '管理费率为空')
        return false
      }
      if (paramsRow.lateFeeCode === null) {
        this.$Message.warning(paramsRow.productName + '自纳金率为空')
        return false
      }
      if (paramsRow.penaltyFeeCode === null) {
        this.$Message.warning(paramsRow.productName + '罚息率为空')
        return false
      }
      if (paramsRow.preTerminationFeeCode === null) {
        this.$Message.warning(paramsRow.productName + '提前结清费率为空')
        return false
      }
      if (paramsRow.guarantorFeeCode === null) {
        this.$Message.warning(paramsRow.productName + '担保服务费率为空')
        return false
      }
      if (paramsRow.carFeeCode === null) {
        this.$Message.warning(paramsRow.productName + '车险费率为空')
        return false
      }
      if (paramsRow.carCautionFeeCode === null) {
        this.$Message.warning(paramsRow.productName + '车险保证金费率为空')
        return false
      }
      if (paramsRow.carFrontFeeCode === null) {
        this.$Message.warning(paramsRow.productName + '意向金费率为空')
        return false
      }
      return true
    },
    // 返回上一页
    handleGoBack () {
      this.$router.back()
    },

    // 初始化页面
    initPage () {
      var vm = this
      const params = {
        currentPage: vm.currentPage,
        pageSize: vm.pageSize,
        productVersion: vm.$route.query.version
      }
      vm.$ajax.post(vm.$appContext.marvels_core_product + 'product/param/product/service/vlist', params).then(res => {
        var data = res.data
        var code = data.code
        var message = data.message
        if (code !== 'success') {
          this.$Message.warning(message)
          return
        }
        vm.data1 = res.data.data.pageInfo.list
        vm.total2 = res.data.data.pageInfo.total
        vm.miscSelectData = res.data.data.miscFeeMap
        vm.ptSelectData = res.data.data.ptFeeMap
        vm.consultSelectData = res.data.data.consultFeeMap
        vm.mngSelectData = res.data.data.mngFeeMap
        vm.lateSelectData = res.data.data.lateFeeMap
        vm.penaltySelectData = res.data.data.penaltyFeeMap
        vm.preSelectData = res.data.data.preFeeMap
        vm.guarantorSelectData = res.data.data.guarantorFeeMap
        vm.carFeeCodeData = res.data.data.carFeeCodeData
        vm.carFrontFeeCodeData = res.data.data.carFrontFeeCodeData
        vm.carCautionFeeCodeData = res.data.data.carCautionFeeCodeData
      }).catch(er => {

      })
    },

    queryPage (pageIndex) {
      var vm = this
      vm.currentPage = pageIndex
      vm.initPage()
    },

    changeToEdit () {
      this.editFlag = 1
    },

    // 通用获取下拉框的文本信息
    getOptionValue (optionArray, keyValue) {
      for (var i = 0; i < optionArray.length; i++) {
        if (optionArray[i].value === keyValue) {
          return optionArray[i].label
        }
      }
      return ''
    },

    addItem () {
      var vm = this
      var productTypeName = vm.$route.query.productTypeName
      var productType = vm.$route.query.productType
      vm.$router.push({
        path: 'proItemadd',
        query: {
          version: vm.$route.query.version,
          productTypeName: productTypeName,
          productType: productType
        }
      })
    },
    batchUpdate () {
      var vm = this
      console.log(vm.data1)
      vm.$ajax.post(vm.$appContext.marvels_core_product + 'product/param/product/service/batchUpdate', vm.data1).then(res => {
        if (res.data) {
          if (res.data.code === 'success') {
            alert('保存成功')
            // vm.$router.push('parameter/list/product')
            this.editFlag = 0
          }
        }
      }).catch(er => {

      })
    }
  }
}
</script>

<style lang="less">
</style>
